﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body { -webkit-user-select: none; user-select: none; }
        .current-index { font-size: 4.8rem; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -90px; background: rgba(0,0,0,0.5); font-family: Arial; display: none; text-align: center; line-height: 80px; }
    </style>
</head>
<body>
    <!--当前显示字母-->
    <div class="current-index H-position-fixed H-z-index-100000 H-border-radius-5 H-theme-font-color-white"></div>
    <!--字母索引-->
    <div class="contact-index H-flexbox-vertical H-position-fixed H-z-index-10000" style="width: 22px; right: 0; top: 0; bottom: 0; height: 100%; ">
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="A">A</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="B">B</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="C">C</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="D">D</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="E">E</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="F">F</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="G">G</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="H">H</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="I">I</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="J">J</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="K">K</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="L">L</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="M">M</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="N">N</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="O">O</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="P">P</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Q">Q</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="R">R</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="S">S</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="T">T</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="U">U</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="V">V</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="W">W</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="X">X</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Y">Y</span>
        <span class="H-flex-item H-display-block H-font-size-14 H-center-all" data-index-name="Z">Z</span>
    </div>
    <!--联系人列表-->
    <div class="contact-list">
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="C">C</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('button_head', 'button/button_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">常见按钮</div>
            </div>
            <div tapmode="" onclick="H.openWin('search_head', 'search/search_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">常见搜索</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="D">D</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('header_head', 'header/header_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">顶部导航</div>
            </div>
            <div tapmode="" onclick="H.openWin('footer_head', 'footer/footer_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">底部工具栏</div>
            </div>
            <div tapmode="" onclick="H.openWin('radio_head', 'radio/radio_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">单选框</div>
            </div>
            <div tapmode="" onclick="H.openWin('chatbox_head', 'chatbox/chatbox_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">对话布局</div>
            </div>
            <div tapmode="" onclick="H.openWin('actionsheet_head', 'actionsheet/actionsheet_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">底部弹出菜单</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="F">F</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('channel_title_head', 'channel-title/channel_title_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">分类标题</div>
            </div>
            <div tapmode="" onclick="H.openWin('checkbox_head', 'checkbox/checkbox_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">复选框</div>
            </div>
            <div tapmode="" onclick="H.openWin('share_menu_head', 'share-menu/share_menu_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">分享菜单</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="G">G</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('func_menu_head', 'func-menu/func_menu_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">功能菜单</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="J">J</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('progress_head', 'progress/progress_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">进度条</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="L">L</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('banner_head', 'banner/banner_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">轮播图</div>
            </div>
            <div tapmode="" onclick="H.openWin('img_lazyload_head', 'img-lazyload/img_lazyload_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">图片懒加载</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="M">M</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('tppl_head', 'tppl/tppl_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">模板引擎</div>
            </div>
            <div tapmode="" onclick="H.openWin('markdown_head', 'markdown/markdown_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">MD编辑器</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="N">N</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('n_grid_head', 'n-grid/n_grid_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">N宫格</div>
            </div>
            <div tapmode="" onclick="H.openWin('hui_icon_head', 'hui-icon/hui_icon_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">内置图标</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="P">P</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('judge_head', 'judge/judge_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">评价评分</div>
            </div>
            <div tapmode="" onclick="H.openWin('review_head', 'review/review_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">评论列表</div>
            </div>
            <div tapmode="" onclick="H.openWin('waterfall_list_head', 'waterfall-list/waterfall_list_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">瀑布流</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="Q">Q</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('range_head', 'range/range_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">区域滑块</div>
            </div>
            <div tapmode="" onclick="H.openWin('switch_head', 'switch/switch_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">切换开关</div>
            </div>
            <div tapmode="" onclick="H.openWin('launch_head', 'launch/launch_head.html', null, { animation: { type: 'push', subType: 'from_bottom', duration: 300 } });" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">启动画</div>
            </div>
            <div tapmode="" onclick="H.openWin('tabs_head', 'tabs/tabs_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">切换选项卡</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="R">R</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('calendar _head', 'calendar/calendar_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">日历组件</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="S">S</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('textbox_head', 'textbox/textbox_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">输入框</div>
            </div>
            <div tapmode="" onclick="H.openWin('timeline_head', 'timeline/timeline_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">时间轴</div>
            </div>
            <div tapmode="" onclick="H.openWin('drop_load_head', 'drop-load/drop_load_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">上拉加载</div>
            </div>
            <div tapmode="" onclick="H.openWin('echart_head', 'echart/echart_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">数据图表</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="T">T</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('badge_head', 'badge/badge_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">提示角标</div>
            </div>
            <div tapmode="" onclick="H.openWin('rich_list_head', 'rich-list/rich_list_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">图文列表</div>
            </div>
            <div tapmode="" onclick="H.openWin('tab_menu_head', 'tab-menu/tab_menu_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">TAB菜单</div>
            </div>
            <div tapmode="" onclick="H.openWin('contacts_head', 'contacts/contacts_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">通讯录</div>
            </div>
            <div tapmode="" onclick="H.openWin('img_show_head', 'img-show/img_show_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">图片展示</div>
            </div>
            <div tapmode="" onclick="H.openWin('dialog_head', 'dialog/dialog_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">提示对话框</div>
            </div>
            <div tapmode="" onclick="H.openWin('hand_locker_head', 'hand-locker/hand_locker_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">图案解锁</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="W">W</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('text_size_head', 'text-size/text_size_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">文字大小</div>
            </div>
            <div tapmode="" onclick="H.openWin('text_list_head', 'text-list/text_list_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">文本列表</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="X">X</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('select_list_head', 'select-list/select_list_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">下拉列表</div>
            </div>
            <div tapmode="" onclick="H.openWin('picture_list_head', 'picture-list/picture_list_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">相册列表</div>
            </div>
            <div tapmode="" onclick="H.openWin('message_tip_head', 'message-tip/message_tip_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-border-vertical-bottom-margin-left-10-after H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">信息提示</div>
            </div>
            <div tapmode="" onclick="H.openWin('drop_reflesh_head', 'drop-reflesh/drop_reflesh_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">下拉刷新</div>
            </div>
        </div>
        <div class="group-name H-font-size-14 H-padding-horizontal-both-10 H-padding-vertical-both-2 H-theme-background-color-eee" data-group-name="Z">Z</div>
        <div class="people-item">
            <div tapmode="" onclick="H.openWin('accordion_head', 'accordion/accordion_head.html');" class="H-text-list H-flexbox-horizontal  H-theme-background-color-white H-vertical-middle H-touch-active">
                <img src="../../image/logo.png" class="H-display-block H-margin-horizontal-left-10" style="width:30px;height:30px;" />
                <div class="H-flex-item H-padding-horizontal-both-10 H-font-size-16 H-padding-vertical-both-12">折叠面板</div>
            </div>
        </div>
    </div>
    <script src="../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        var indexObj = H.D(".contact-index");
        var currentIndexObj = H.D(".current-index");
        var contactListObj = H.D(".contact-list");

        // 索引字母个数
        var indexSize = 26;
        // 索引列表高度
        var indexObj_height = indexObj.offsetHeight;

        // 滚动到指定字母位置
        function scrollToWord(word) {
            if (word) {
                var scrollObj = H.D(".group-name[data-group-name=" + word + "]");
                if (scrollObj) {
                    document.body.scrollTop = scrollObj.offsetTop + document.documentElement.scrollTop;
                }
            }
        }
        // 计算字母对应位置
        function calcWordToOffset(event) {
            var touch = event.targetTouches[0];
            var clientY = touch.clientY > 0 ? touch.clientY : 0;

            var _index = Math.floor(clientY / (indexObj_height / indexSize)) + 95;
            var word = "";
            // A-Z
            if (_index >= 97 && _index <= 122) {
                currentIndexObj.innerHTML = String.fromCharCode(_index).toUpperCase();
                word = String.fromCharCode(_index).toUpperCase();
            }

            else {
            }
            scrollToWord(word);
        }

        // 1.0 为字母索引绑定touch事件
        // 1.1 一触摸触发
        indexObj.addEventListener("touchstart", function (event) {
            if (event.targetTouches.length == 1) {
                // 显示当前字母
                H.cssText(currentIndexObj, "display:block;");
                // 高亮索引区域
                indexObj.classList.add("H-theme-background-color-eee");

                calcWordToOffset(event);
            }
        }, false);
        // 1.2 触摸过程
        indexObj.addEventListener("touchmove", function (event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault();
                calcWordToOffset(event);
            }
        }, false);

        // 1.3 离开触摸
        indexObj.addEventListener("touchend", function (event) {
            // 显示当前字母
            H.cssText(currentIndexObj, "display:none;");
            // 高亮索引区域
            indexObj.classList.remove("H-theme-background-color-eee");
        }, false);
    </script>
</body>
</html>